<template>
    <div class="HighlightJs">
        <pre v-highlight><code :class="codeType">
             <slot></slot>
        </code></pre>

    </div>
</template>

<script>
    import highlightJs from 'highlight.js';
    import 'highlight.js/styles/androidstudio.css';
    const highlightCode = () => {
        const block = document.querySelectorAll('pre code');
        highlightJs.configure({useBR: true});
        block.forEach((el) => {
            highlightJs.highlightBlock(el)
        })
    };
    export default {
        name: "HighlightJs",
        props:{
            codeType:{
                default:"language-html",
                type:String
            }
        },
        //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
        mounted() {
            highlightCode()
        },
        //生命周期 - 更新之后",数据模型已更新,html模板已更新
        updated() {
            highlightCode()
        }
    }

</script>

<style scoped>
.HighlightJs{
    width: 100%;
    font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;
    font-size: 18px;
    border-radius: 30px;
}
</style>

